---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Zoom bar
description: 'Control a map&#39;s zoom with <a href="https://github.com/kartena/Leaflet.zoomslider">Leaflet.zoomslider</a>.'
tags:
  - ui
  - plugins
---
<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-zoomslider/v0.7.0/L.Control.Zoomslider.js'></script>
<link href='{{site.tileApi}}/mapbox.js/plugins/leaflet-zoomslider/v0.7.0/L.Control.Zoomslider.css' rel='stylesheet' />

<style>
/* Adjustments to account for mapbox.css box-sizing rules */
.leaflet-control-zoomslider-knob { width:14px; height:6px; }
.leaflet-container .leaflet-control-zoomslider-body {
  -webkit-box-sizing:content-box;
     -moz-box-sizing:content-box;
          box-sizing:content-box;
  }
</style>

<div id='map'></div>
<script>
var map = L.mapbox.map('map', null, {
  zoomControl: false
})
  .setView([40, -74.50], 6)
  .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

L.control.zoomslider().addTo(map);
</script>
